<template>
	<navBar title="我的"></navBar>
	<view class="memo-profile-page" :style="{ backgroundColor: themeColors.bgColor }">
		<!-- 个人信息头部 -->
		<view class="profile-header" :style="{ backgroundColor: themeColors.cardColor }">
			<view class="avatar-wrapper">
				<image class="avatar-wrapper-img" :src="myUserInfo.avatarUrl"></image>
			</view>

			<view class="user-info">
				<view class="username" :style="{ color: themeColors.textColor }">{{ myUserInfo.nickName || '默认'}}</view>
				<view class="user-motto" :style="{ color: themeColors.subTextColor }">{{ myUserInfo.motto || '默认' }}
				</view>
			</view>
		</view>

		<!-- 任务统计卡片 -->
		<view class="stats-card" :style="{ backgroundColor: themeColors.cardColor }">
			<view class="stat-item">
				<view class="stat-number" :style="{ color: themeColors.accentColor }">{{ stats.pending }}</view>
				<view class="stat-label" :style="{ color: themeColors.subTextColor }">待完成</view>
			</view>
			<view class="stat-divider" :style="{ backgroundColor: themeColors.dividerColor }"></view>
			<view class="stat-item">
				<view class="stat-number" :style="{ color: themeColors.successColor }">{{ stats.completed }}</view>
				<view class="stat-label" :style="{ color: themeColors.subTextColor }">已完成</view>
			</view>
			<view class="stat-divider" :style="{ backgroundColor: themeColors.dividerColor }"></view>
			<view class="stat-item">
				<view class="stat-number" :style="{ color: themeColors.textColor }">{{ stats.total }}</view>
				<view class="stat-label" :style="{ color: themeColors.subTextColor }">总计</view>
			</view>
		</view>

		<!-- 个人设置区域 -->
		<view class="settings-section" :style="{ backgroundColor: themeColors.cardColor }">
			<view class="section-title" :style="{ color: themeColors.subTextColor }">个性化设置</view>

			<u-cell-group border="false">
				<u-cell :title="myUserInfo.nickName" title="头像与用户名" isLink arrow :border-bottom="true"
					:title-color="themeColors.textColor" :value-color="themeColors.subTextColor"
					@click="goToName"></u-cell>

				<u-cell title="个人签名" :value="myUserInfo.motto" isLink arrow :border-bottom="true"
					:title-color="themeColors.textColor" :value-color="themeColors.subTextColor" @click="gotoMotto"></u-cell>

				<u-cell title="主题颜色" :border-bottom="true" :title-color="themeColors.textColor"
					:label="themeColors.name">
					<template #value>
						<up-switch :modelValue="themeIndex" @change="changeTheme" activeColor="#FF6D00"
							inactiveColor="#1E88E5"></up-switch>
					</template>
				</u-cell>

				<u-cell title="权限" isLink arrow :border-bottom="true" :title-color="themeColors.textColor"
					@click="goToSetting"></u-cell>

				<u-cell title="数据备份" isLink arrow :title-color="themeColors.textColor"></u-cell>
			</u-cell-group>
		</view>

		<!-- 关于区域 -->
		<view class="settings-section" :style="{ backgroundColor: themeColors.cardColor, marginTop: '20rpx' }">
			<view class="section-title" :style="{ color: themeColors.subTextColor }">关于</view>

			<u-cell-group border="none">
				<u-cell title="帮助中心" isLink arrow :border-bottom="true" :title-color="themeColors.textColor"></u-cell>

				<u-cell title="关于备忘录" isLink arrow :title-color="themeColors.textColor"></u-cell>
			</u-cell-group>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn">
			<u-button text="退出登录" :color="themeColors.accentColor" shape="square" :border-radius="8"
				@click="showLogoutConfirm"></u-button>
		</view>

		<!-- 退出登录确认弹窗 -->
		<u-modal v-model="showLogoutModal" title="提示" content="确定要退出登录吗？" confirm-text="退出" cancel-text="取消"
			@confirm="logout" @cancel="showLogoutModal = false"></u-modal>
	</view>
	<tabBar></tabBar>
</template>

<script>
	import {
		themeColor
	} from '@/stores/themeColor'
	import {
		useMemoStore
	} from '@/stores/memoStore'
	import {
		userInfo
	} from '@/stores/userInfo'

	export default {
		data() {
			return {
				themeIndex: false, // false代表0, true代表1

				// 退出登录弹窗控制
				showLogoutModal: false
			};
		},
		computed: {			
			// 计算三种状态
			stats() {
				const pending = useMemoStore().memoList.filter(item => item[3] === '0').length
				const completed = useMemoStore().memoList.filter(item => item[3] === '1').length
				const total = pending + completed
				return {
					pending,
					completed,
					total
				}
			},
			
			// 个人信息(头像，用户名，个性签名)
			myUserInfo() {
				const avatarUrl = userInfo().avatarUrl
				const nickName = userInfo().nickName
				const motto = userInfo().motto
				return {
					avatarUrl,
					nickName,
					motto
				}
			},

			// 当前主题颜色
			themeColors() {
				return themeColor().themes[themeColor().currentThemeIndex]
			}
		},
		
		async created() {
			await userInfo().initUser()
			await userInfo().getUserInfo()
		},

		methods: {
			// 切换主题
			changeTheme() {
				if (this.themeIndex) {
					themeColor().changeTheme(0)
				} else {
					themeColor().changeTheme(1)
				}
				this.themeIndex = !this.themeIndex
			},

			//前往需改 头像与用户名 界面
			goToName() {
				uni.navigateTo({
					url: '../my/name/name'
				})
			},
			// 前往修改 个性签名 页面
			gotoMotto() {
				uni.navigateTo({
					url: '../my/motto/motto'
				})
			},
			// 前往 权限 页面
			goToSetting() {
				uni.navigateTo({
					url: '../my/setting/setting'
				})
			},

			// 显示退出登录确认弹窗
			showLogoutConfirm() {
				this.showLogoutModal = true;
			},

			// 执行退出登录操作
			logout() {
				this.showLogoutModal = false;
				// 这里可以添加实际的退出登录逻辑
				this.$u.toast('已退出登录');
			}
		}
	}
</script>

<style lang="scss">
	.memo-profile-page {
		min-height: 100vh;
		transition: background-color 0.3s ease;
	}

	/* 个人信息头部样式 */
	.profile-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 40rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.avatar-wrapper {
		position: relative;
		margin: 10rpx auto;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;

		.avatar-wrapper-img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0%;
			left: 0%;
			border-radius: 50%;
		}
	}

	.avatar-edit-icon {
		position: absolute;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-info {
		text-align: center;
	}

	.username {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.user-motto {
		font-size: 28rpx;
	}

	/* 任务统计卡片样式 */
	.stats-card {
		margin: 0 30rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
	}

	.stat-number {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 26rpx;
	}

	.stat-divider {
		width: 1rpx;
		height: 60rpx;
		align-self: center;
	}

	/* 设置区域样式 */
	.settings-section {
		margin: 0 30rpx;
		border-radius: 16rpx;
		padding: 20rpx 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 26rpx;
		padding: 0 30rpx 20rpx;
	}

	/* 主题颜色选择器样式 */
	.theme-color-options {
		display: flex;
		gap: 15rpx;
	}

	.theme-color-dot {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	}

	/* 退出登录按钮样式 */
	.logout-btn {
		padding: 40rpx 30rpx;
	}
</style>